<script setup lang="ts">
import { Close, Search } from '@element-plus/icons-vue'
import { ref } from "vue"
defineOptions({
  name: 'dialogqueue',
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
]
const input2 = ref("")
const emit = defineEmits(['getdialogqueue'])
const clone = () => {
  emit('getdialogqueue', false)
}
</script>

<template>
  <div id="dialogqueue">
    <div class="header">
      <span>就诊列表</span>
      <el-icon @click="clone"><Close /></el-icon>
    </div>
    <div class="input">
      <el-input
        v-model="input2"
        placeholder="患者姓名"
        :prefix-icon="Search"
      />
      <el-button style="margin-left: 10px;" type="primary" plain>搜索</el-button>
    </div>

    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column prop="name" label="病人姓名"></el-table-column>
      <el-table-column prop="date" label="就诊日期"></el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="50" />
  </div>
</template>

<style lang="scss" scoped>
#dialogqueue {
  background-color: #fff;
  width: 400px;
  padding: 10px;
  height: 600px;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .input{
    margin: 10px 0;
    span{
      font-size: 18px !important;
      width: 80px;
    }
    display: flex;
    align-items: center;
  }
}
</style>
